<template>
  <div ref="echart" class="echartDiv"></div>
</template>
 
<script>
import { onMounted, toRefs, ref, reactive, getCurrentInstance } from "vue";
import { getwater, getorder } from "@/apis/orderData.js";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    let state = reactive({
      echart: ref(),
    });

    const waterlist = ref([]);
    const tableData = ref([]);

    let option = {
      title: {
        text: "商品销售数量统计表",
        subtext: "各项商品销售数量",
        left: "center",
      },
      tooltip: {
        trigger: "item",  
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "单项商品销售统计",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1, name: "农夫山泉" },
            { value: 1, name: "景田" },
            { value: 1, name: "怡宝" },
            { value: 1, name: "恒大" },
            { value: 1, name: "屈臣氏" },
            { value: 1, name: "益寿泉" },
            { value: 1, name: "娃哈哈" },
            { value: 1, name: "乐百氏" },
            { value: 1, name: "宝露" },
            { value: 1, name: "鼎湖山泉" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 20,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    const echartInit = (options) => {
      let myChart = proxy.$echarts.init(state.echart);
      options && myChart.setOption(options);
    };

    //挂载
    onMounted(() => {
      getwaterlist();
    });

    async function getwaterlist() {
      await getwater().then((res) => {
        waterlist.value = res.data.page.list;
      });
      getdata();
    }

    function getdata() {
      getorder().then((res) => {
        tableData.value = res.data.page.list;
        tableData.value = mergearray(tableData.value, waterlist.value);
        tableData.value = rearr(tableData.value);
        option.series[0].data = tableData.value;
        echartInit(option);
      });
    }

    function rearr(arr) {
      let tempArr = [];
      let afterData = [];
      for (let i in arr) {
        if (tempArr.indexOf(arr[i].wid) === -1) {
          afterData.push(arr[i]);
          tempArr.push(arr[i].wid);
        } else {
          for (let j in afterData) {
            if (afterData[j].wid == arr[i].wid) {
              afterData[j].value += arr[i].value;
            }
          }
        }
      }
      return afterData;
    }

    function mergearray(arr1, arr2) {
      const arrs = arr1.map((item) => {
        const data = arr2.find((i) => item.wid == i.wid);
        return {
          ...item,
          ...data,
          value: data ? item.total : [],
          name: data ? data.wname : [],
        };
      });
      return arrs;
    }

    return {
      ...toRefs(state),
      echartInit,
      tableData,
    };
  },
};
</script>
 
<style scoped>
.echartDiv {
  width: 100%;
  text-align: center;
}
</style>